<template>
	<!-- 合伙人 -->
	<view class="centent">
		<!-- <lime-barrage /> -->
		<view class="topImg">

		</view>
		<view class="dataScreen">
			<view class="dataGroup">
				<view class="partnerNum groupItem">
					<view class="num">
						<view class="left">
							120
						</view>
						<view class="right">
							家
						</view>
					</view>
					<view class="txt">
						开店合伙人
					</view>
				</view>
				<view class="sellNum groupItem">
					<view class="num">
						<view class="left">
							360
						</view>
						<view class="right">
							万
						</view>
					</view>
					<view class="txt">
						累计销售额
					</view>
				</view>
				<view class="customNum groupItem">
					<view class="num">
						<view class="left">
							14800
						</view>
						<view class="right">
							人
						</view>
					</view>
					<view class="txt">
						用户总数量
					</view>
				</view>
			</view>
		</view>
		<view class="platform">

		</view>
		<view class="global">

		</view>
		<lff-barrage ref="lffBarrage"></lff-barrage>
		<view class="publicize">
			<view class="personInfo">
				<view class="income">
					<view class="">
						￥
					</view>
					<view class="num">
						20
					</view>
					<view class="txt">
						万
					</view>
				</view>
				<view class="user">
					<view class="name">
						小苹果
					</view>
					<view class="age">
						35岁/全职宝妈
					</view>
				</view>
			</view>
			<view class="mark">
				我利用淘宝店积累的粉丝做社群团购，通过美传平台，经常在宝妈群里种草物美价廉的好货，宝妈们非常喜欢帮我推荐会员，我也可以得到不少佣金呢。
			</view>
			
		</view>
		<view class="applyFor">
			立即申请
		</view>
	</view>
</template>

<script>
	import lffBarrage from '@/components/lff-barrage/lff-barrage.vue'
	export default {
		components: {
			lffBarrage
		},
		data() {
			return {
				lffArr: ['你好呀小伙子', '你好呀小伙子', '你好呀小伙子', '你好呀小伙子', '你好呀小伙子'],
				value: '',
				barrageData: [],
				intervalOne: null,
			};
		},
		methods: {
			colrdo() { //插入一条弹幕
				this.lffArr.map((items) => {

					this.$refs.lffBarrage.add({
						item: items,
						status: 'reuse'
					});
				})
			},
			onFire() {
				if (this.value) {
					this.barrageData.push({
						text: this.value
					})
					this.value = ''
				}
			}
		},
		mounted() {
			this.colrdo()
			this.onFire()
			this.intervalOne = setInterval(() => {
				this.colrdo()
			}, 9000)
		},
		beforeDestroy() {
			clearInterval()
		}

	}
</script>

<style lang="scss" scoped>
	* {
		box-sizing: border-box;
	}

	.centent {
		width: 100%;
		// height: 100vh;
		background-color: #FCE3C4;
		padding-top: 50rpx;
		padding-bottom: 50rpx;
		position: relative;

		.topImg {
			width: 85%;
			height: 500rpx;
			background-color: coral;
			margin: 0rpx auto;
		}

		.dataScreen {
			width: 90%;
			height: 300rpx;
			background-color: coral;
			margin: 0rpx auto;
			margin-top: 40rpx;
			position: relative;

			.dataGroup {
				position: absolute;
				top: 30rpx;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 90%;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.groupItem {
					text-align: center;

					.num {
						display: flex;
						align-items: center;
						justify-content: center;

						.left {
							font-size: 50rpx;
						}

						.right {}
					}

					.txt {}
				}
			}
		}

		.platform {
			width: 90%;
			height: 350rpx;
			background-color: coral;
			margin: 0rpx auto;
			margin-top: 40rpx;
		}

		.global {
			width: 90%;
			height: 250rpx;
			background-color: coral;
			margin: 0rpx auto;
			margin-top: 40rpx;
		}

		.publicize {
			width: 90%;
			height: 580rpx;
			background-color: #FEF5E6;
			margin: 0rpx auto;
			margin-top: 40rpx;
			border-radius: 20rpx;
			padding: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.personInfo {
				width: 60%;
				background-color: olivedrab;
				height: 50%;
				margin: 0 auto;
				// margin-bottom: 40rpx;
				padding-bottom: 40rpx;
				position: relative;

				.income {
					display: flex;
					align-items: flex-end;
					justify-content: center;
					color: #fff;
					position: absolute;
					top: 15%;
					right: 0;
					// bottom: 0;
					left: 5%;
					// bottom: 0;
					margin: auto;

					.num {
						margin: 0 4rpx;
						font-size: 35rpx;
					}
				}

				.user {
					position: absolute;
					bottom: 20%;
					right: 0;

					.name {
						font-size: 35rpx;
						font-weight: bold;
					}

					.age {
						color: #5A3111;
					}
				}
			}

			.mark {
				width: 100%;
				height: 50%;
				padding-top: 40rpx;
				border-top: 1px solid #5A3111;
				color: #5A3111;
				letter-spacing: 3rpx;
				line-height: 50rpx;
			}

			
		}
		.applyFor {
			width: 90%;
			margin: 0rpx auto;
			margin-top: 40rpx;
			padding: 28rpx 0;
			text-align: center;
			border-radius: 20rpx;
			background-image: linear-gradient(to right,#FF2928,#FD6F2B);
			color: #fff;
			border: 5rpx solid #fff;
		}
	}
</style>
